<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import ArrowLeft from "@iconify-icons/ep/arrow-left";
import EditPen from "@iconify-icons/ep/edit-pen";
import { AdStatusText, AdTypeText, getAdStatusTagType, calculateClickRate } from "../utils/types";

defineOptions({
  name: "AdDetail"
});

const route = useRoute();
const router = useRouter();
const loading = ref(true);
const adDetail = ref<any>({});

// 模拟获取广告详情数据
const fetchAdDetail = async () => {
  loading.value = true;
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // 模拟广告详情数据
    const mockDetail = {
      id: route.params.id,
      name: "乒乓球拍促销广告",
      positionId: 1,
      positionName: "首页横幅",
      type: 1,
      title: "红双喜乒乓球拍限时优惠",
      description: "红双喜专业乒乓球拍，世界冠军同款，限时8折优惠，机会难得！",
      imageUrl: "https://picsum.photos/400/300?random=1",
      linkUrl: "https://example.com/product/123",
      status: 1,
      startTime: "2024-01-01 00:00:00",
      endTime: "2024-12-31 23:59:59",
      sort: 10,
      clickCount: 1250,
      viewCount: 15680,
      clickRate: calculateClickRate(1250, 15680),
      advertiser: "红双喜",
      budget: 50000,
      spent: 32500,
      createTime: "2024-01-01 10:30:00",
      updateTime: "2024-01-15 14:20:00",
      remark: "重点推广产品，需要密切关注投放效果"
    };
    
    adDetail.value = mockDetail;
  } catch (error) {
    ElMessage.error("获取广告详情失败");
    console.error("获取广告详情失败:", error);
  } finally {
    loading.value = false;
  }
};

// 返回列表
const goBack = () => {
  router.push("/ad/list");
};

// 编辑广告
const editAd = () => {
  router.push(`/ad/edit/${route.params.id}`);
};

onMounted(() => {
  fetchAdDetail();
});
</script>

<template>
  <div class="main" v-loading="loading">
    <!-- 页面头部 -->
    <div class="mb-4 flex items-center justify-between">
      <div class="flex items-center">
        <el-button
          :icon="useRenderIcon(ArrowLeft)"
          @click="goBack"
          class="mr-3"
        >
          返回列表
        </el-button>
        <h2 class="text-xl font-semibold">广告详情</h2>
      </div>
      <el-button
        type="primary"
        :icon="useRenderIcon(EditPen)"
        @click="editAd"
      >
        编辑广告
      </el-button>
    </div>

    <!-- 广告详情内容 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <el-row :gutter="24">
        <!-- 左侧基本信息 -->
        <el-col :span="16">
          <div class="space-y-6">
            <!-- 基本信息 -->
            <div>
              <h3 class="text-lg font-medium mb-4 border-b pb-2">基本信息</h3>
              <el-row :gutter="16" class="mb-4">
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">广告名称：</span>
                    <span class="value font-medium">{{ adDetail.name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">广告位：</span>
                    <el-tag type="primary" size="small">{{ adDetail.positionName }}</el-tag>
                  </div>
                </el-col>
              </el-row>
              
              <el-row :gutter="16" class="mb-4">
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">广告类型：</span>
                    <el-tag size="small">{{ AdTypeText[adDetail.type] }}</el-tag>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">状态：</span>
                    <el-tag
                      :type="getAdStatusTagType(adDetail.status)"
                      size="small"
                    >
                      {{ AdStatusText[adDetail.status] }}
                    </el-tag>
                  </div>
                </el-col>
              </el-row>
              
              <el-row :gutter="16" class="mb-4">
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">广告主：</span>
                    <span class="value">{{ adDetail.advertiser }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">排序值：</span>
                    <span class="value">{{ adDetail.sort }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 投放信息 -->
            <div>
              <h3 class="text-lg font-medium mb-4 border-b pb-2">投放信息</h3>
              <el-row :gutter="16" class="mb-4">
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">开始时间：</span>
                    <span class="value">{{ dayjs(adDetail.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">结束时间：</span>
                    <span class="value">{{ dayjs(adDetail.endTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                  </div>
                </el-col>
              </el-row>
              
              <el-row :gutter="16" class="mb-4">
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">链接地址：</span>
                    <el-link :href="adDetail.linkUrl" target="_blank" type="primary">
                      {{ adDetail.linkUrl }}
                    </el-link>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 统计信息 -->
            <div>
              <h3 class="text-lg font-medium mb-4 border-b pb-2">统计信息</h3>
              <el-row :gutter="16">
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-value text-blue-600">{{ adDetail.viewCount?.toLocaleString() }}</div>
                    <div class="stat-label">展示次数</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-value text-green-600">{{ adDetail.clickCount?.toLocaleString() }}</div>
                    <div class="stat-label">点击次数</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-value text-purple-600">{{ adDetail.clickRate }}</div>
                    <div class="stat-label">点击率</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-value text-orange-600">¥{{ adDetail.spent?.toLocaleString() }}</div>
                    <div class="stat-label">已消费</div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 内容信息 -->
            <div>
              <h3 class="text-lg font-medium mb-4 border-b pb-2">内容信息</h3>
              <div class="mb-4">
                <div class="info-item mb-3">
                  <span class="label">广告标题：</span>
                  <span class="value font-medium">{{ adDetail.title }}</span>
                </div>
                <div class="info-item mb-3">
                  <span class="label">广告描述：</span>
                  <p class="value mt-2 text-gray-600 leading-relaxed">{{ adDetail.description }}</p>
                </div>
                <div class="info-item">
                  <span class="label">备注信息：</span>
                  <p class="value mt-2 text-gray-500">{{ adDetail.remark || '无' }}</p>
                </div>
              </div>
            </div>

            <!-- 其他信息 -->
            <div>
              <h3 class="text-lg font-medium mb-4 border-b pb-2">其他信息</h3>
              <el-row :gutter="16">
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">创建时间：</span>
                    <span class="value">{{ dayjs(adDetail.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="label">更新时间：</span>
                    <span class="value">{{ dayjs(adDetail.updateTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>

        <!-- 右侧图片和预算信息 -->
        <el-col :span="8">
          <div class="space-y-6">
            <!-- 广告图片 -->
            <div>
              <h3 class="text-lg font-medium mb-4 border-b pb-2">广告图片</h3>
              <div class="image-container">
                <el-image
                  v-if="adDetail.imageUrl"
                  :src="adDetail.imageUrl"
                  :preview-src-list="[adDetail.imageUrl]"
                  fit="cover"
                  class="w-full h-48 rounded-lg"
                />
                <div v-else class="no-image">
                  <span>暂无图片</span>
                </div>
              </div>
            </div>

            <!-- 预算信息 -->
            <div>
              <h3 class="text-lg font-medium mb-4 border-b pb-2">预算信息</h3>
              <div class="budget-info">
                <div class="budget-item">
                  <span class="budget-label">总预算：</span>
                  <span class="budget-value text-blue-600">¥{{ adDetail.budget?.toLocaleString() }}</span>
                </div>
                <div class="budget-item">
                  <span class="budget-label">已消费：</span>
                  <span class="budget-value text-red-600">¥{{ adDetail.spent?.toLocaleString() }}</span>
                </div>
                <div class="budget-item">
                  <span class="budget-label">剩余预算：</span>
                  <span class="budget-value text-green-600">¥{{ (adDetail.budget - adDetail.spent)?.toLocaleString() }}</span>
                </div>
                <div class="budget-progress mt-3">
                  <div class="flex justify-between text-sm text-gray-600 mb-1">
                    <span>消费进度</span>
                    <span>{{ ((adDetail.spent / adDetail.budget) * 100).toFixed(1) }}%</span>
                  </div>
                  <el-progress
                    :percentage="(adDetail.spent / adDetail.budget) * 100"
                    :color="(adDetail.spent / adDetail.budget) > 0.8 ? '#F56C6C' : '#67C23A'"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  
  .label {
    min-width: 100px;
    color: #606266;
    font-weight: 500;
  }
  
  .value {
    flex: 1;
    color: #303133;
  }
}

.stat-card {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  .stat-label {
    font-size: 14px;
    color: #666;
  }
}

.image-container {
  .no-image {
    width: 100%;
    height: 192px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    border: 1px dashed #dcdfe6;
    border-radius: 8px;
    color: #909399;
  }
}

.budget-info {
  .budget-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .budget-label {
      color: #606266;
      font-weight: 500;
    }
    
    .budget-value {
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>